<!-- 设备管理的条件筛选 -->
<template>
  <div>
    <div id="data-screening">
      <table cellpadding="20" cellspacing="0" border="1px #e9e9e9">
        <tr class="nav1">
          <td>数据筛选</td>
        </tr>
        <tr class="nav2">
          <td class="condition">
            <div>事件状态：</div>
            <div>
              <a-select
                :style="{ width: '200px', height: '35px' }"
                placeholder="Select"
                :trigger-props="{ autoFitPopupMinWidth: true }"
                :imodel-value="selecValue"
                @change="changed"
              >
                <a-option>全部</a-option>
                <a-option>已处理</a-option>
                <a-option>未处理</a-option>
              </a-select>
            </div>
            <div>日期：</div>
            <div>
              <a-range-picker
                @change="onChange"
                @select="onSelect"
                style="width: 340px; marginbottom: 40px; height: 35px"
                show-confirm-btn
                clear
                :disabled-input="true"
                @ok="ok"
              />
            </div>
            <div>
              <a-button type="primary" @click="changeList">查询</a-button>
            </div>
            <div>
              <a-button type="dashed" @click="timeRest">重置</a-button>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { useDacive } from "../../store/daciveData";
import { CalendarValue } from "@arco-design/web-vue/es/date-picker/interface";
import { whereType } from "../../types/suTypes/eventWhereType";
let dacive = useDacive();
let onChange = () => {};
let onSelect = () => {};
let selecValue = "全部";
let changed = (d: any) => {
  if (d == "未处理") {
    whereData.statevalue = 1;
  } else {
    whereData.statevalue = 2;
  }
};
let ok = (a: CalendarValue[]) => {
  whereData.timevalue = a as Array<string>;
};

let whereData = reactive<whereType>({
  statevalue: null,
  typevalue: null,
  timevalue: null,
  page: 1,
  limit: 10,
  alarmStart: null,
});

// 查询按钮事件
let changeList = () => {
  dacive.runWhereAction(whereData);
};
// 重置按钮事件
let timeRest = () => {
  whereData.statevalue = null;
  whereData.typevalue = null;
  whereData.timevalue = null;
  whereData.page = 1;
  whereData.limit = 10;
  selecValue = "全部";
  dacive.runWhereAction(whereData);
};
</script>

<style scoped>
#data-screening {
  border: 0px;
  width: 100%;
  font-size: 15px;
  font-weight: 400;
  font-family: "FontAwesome",serif;
  color: #666666;
}
#data-screening table {
  width: 100%;
}
#data-screening .nav1 {
  color: #333333;
  font-weight: 400;
  font-size: 15px;
}
#data-screening .nav2 .condition {
  display: flex;
  /* background-color: aqua; */
  align-items: center;
}
#data-screening .nav2 .condition div {
  margin: 0 18px;
}
</style>
